<script setup lang="ts">
import { ref,watch } from "vue";
import {FlowData,FlowTypeEnum} from '../index.d'
import addBtn from "./addBtn.vue";
import {getParentMap} from '../hook/flowData.hook'
interface Props {
    d:FlowData,
	isBranches?:boolean,
    parentMap:Map<string, FlowData>,
}
const {d,isBranches,parentMap} = withDefaults(defineProps<Props>(),{
	isBranches:false,
}) 
const emit = defineEmits(["addItem","delItem","selectItem"]);
const comKey = ref(0)
watch(d,(n,o)=>{
    console.log(n,o)
    comKey.value++
})

const delItem = (item:FlowData)=>{
    emit("delItem",item)
}
const selectItem = (item:FlowData)=>{
    emit("selectItem",item)
}
const addItem = (item:FlowData,branche:boolean,isDown?:boolean,info?:any)=>{
    console.log(1)
    emit("addItem",item,branche,isDown,info)
}
</script>
<template>
<div :key="comKey" style="" :class="{'h-full':!d.nextNode&&!d.branches&&isBranches}" class="flow-body">
	<!-- 结束节点 -->
	<div v-if="d.type == FlowTypeEnum.END" class="end">
        结束
    </div>
	<!-- 节点 -->
    <div class="base-node" v-else-if="d.type" :class="{'h-full':!d.nextNode&&!d.branches&&isBranches}">
		<div class="node-box flex flex-col">
            <el-popconfirm
                title="确定删除该节点吗？"
                @confirm="delItem(d)"
                class=" "
                v-if="d.type!=FlowTypeEnum.START"
                >
                <template #reference>
                    <i class="del-btn z-icon z-times" title="删除"></i>
                </template>
                
            </el-popconfirm>
			{{d.id}}
		</div>
		<div class="line-column-middle">
            <el-popover placement="right-start" width="176" trigger="hover">
                <addBtn @add="(type: any)=>{addItem(d,false,true,type)}"/>
                <template #reference>
                    <el-button type="primary" class="add-btn" circle style=""><i class="z-icon z-plus"></i></el-button>
                </template>
            </el-popover>
            <!-- <el-button type="primary" class="add-btn" circle style=""><i class="z-icon z-plus"></i></el-button> -->
			<div class="line"></div>
		</div>
	</div>
	<!-- 分支节点 -->
	<div class="base-branch" v-if="d.branches">
		<div class="branch">
			<div class="branch-box">
                <!-- 新增分支按钮 -->
                <el-button class="branch-add-btn" circle style="" @click="addItem(d,true)"><i class="z-icon z-plus"></i></el-button>
                
				<div class="col-box" v-for="(i,index) in d.branches" :key="index">
					<!-- 遮盖线 -->
                    <div class="cover-line top-left" v-if="index == 0"></div>
                    <div class="cover-line top-right" v-if="index == d.branches.length-1"></div>
                    <div class="cover-line bt-left" v-if="index == 0"></div>
                    <div class="cover-line bt-right" v-if="index == d.branches.length-1"></div>
					<!-- 节点上连接线 -->
                    <div class="top-line-box">
                        <div class="line"></div>
                    </div>
					<!-- 递归组件 -->
                    <process ref="process1" :d="i" :parentMap="parentMap" isBranches @addItem="addItem" @delItem="delItem" @select="selectItem"/>
					<!-- 节点下连接线 -->
                    <div class="line-column-middle" style="min-height:0px">
                        <div class="line"></div>
                    </div>
				</div>
			</div>
			<!-- 节点下连接线 -->
			<div class="line-column-middle" style="">
                <el-popover placement="right-start" width="176" trigger="hover">
                    <addBtn @add="(type: any)=>{addItem(d,false,true,type)}"/>
                    <template #reference>
                        <el-button type="primary" class="add-btn" circle style=""><i class="z-icon z-plus"></i></el-button>
                    </template>
                </el-popover>
                <!-- <addBtn @add="type=>{addItem(d,false,true,type)}"/> -->
                <!-- <el-button type="primary" class="add-btn" circle style=""><i class="z-icon z-plus"></i></el-button> -->
				<div class="line"></div>
			</div>
		</div>
	</div>
	<process ref="process2" v-if="d.nextNode" :d="d.nextNode" :parentMap="parentMap" @addItem="addItem" @delItem="delItem" @select="selectItem"></process>
</div>
</template>
<style lang="scss" scoped>
.flow-body{
    :deep(.el-button){
        width: 32px;
        // border: 0px!important;
    }
}
.base-node {
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 180px;
    padding: 0 50px;
}
.base-branch{
    display: inline-flex;
    flex-shrink: 0;
    width: 100%;
	.branch{
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		min-height: 270px;
	}
	.branch-box{
		position: relative;
		display: flex;
		height: auto;
		min-height: 180px;
		border-top: 1px solid #dfdfe8;
		border-bottom: 1px solid #dfdfe8;
		overflow: visible;
		.col-box{
			position: relative;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
		}
	}
}
.node-box {
	position: relative;
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 270px;
    border-radius: 8px;
    box-shadow: 0 4px 10px #0c1f5014;
    cursor: pointer;
    background-color: #fff;
    min-height: 100px;
}
.del-btn{
    position: absolute;
    top: -10px;
    right: -8px;
    font-size:16px;
    color: #acb3bd;
    opacity: 0;
}
.node-box:hover .del-btn{
    opacity: 1;
}
.branch-add-btn{
    position: absolute;
    top:-15px;
    left:calc(50% - 16px);
    z-index:99;
}
.add-btn{
    position: absolute;
    top:30px;
    left:calc(50% - 16px);
    z-index:99;
}
.line-column-middle{
    position: relative;
    display: inline-flex;
    flex-grow: 1;
    flex-shrink: 0;
    width: 240px;
    min-height: 110px;
    .line{
        position: absolute;
        right: 50%;
        width: 1px;
        height: 100%;
        background-color: #ccd4e0;
        z-index: 0;
    }
}
.top-line-box{
    height:30px;
    position:relative;
    .line{
        position: absolute;
        right: 50%;
        width: 1px;
        height: 100%;
        background-color: #ccd4e0;
        z-index: 0;
    }
}
.cover-line{
    position: absolute;
    width: 50%;
    height: 4px;
    background: #F9FAFC;
}
.top-left{
    top: -2px;
    left: -1px
    
}
.top-right{
    top: -2px;
    right: 0px
}
.bt-left{
    bottom: -2px;
    left: -1px
    
}
.bt-right{
    bottom: -2px;
    right: 0px
}
.end{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight:bold;
    font-size: 14px;
    border-radius: 100%;
    box-shadow: 0 4px 10px 0 #0c1f5014;
    color: #121315;
    background: #fff;
    margin: auto;
}

</style>